<template>
  <div class="mima2">

    <el-dialog title="请设置导出密码" center :visible.sync="mimasetlog" width="470px" :close-on-click-modal="false" @close="guanbi">
      <div>
        <el-input v-model="mimaset" show-password placeholder="请输入导出密码"></el-input>
      </div>
      <div style="padding: 30px 0;">
        <el-input v-model="mimaset2" show-password placeholder="请再次输入密码"></el-input>
      </div>
      <div style="color: rgb(155, 155, 155); font-size: 14px;">提示：该密码为本账号个人导出密码，请勿将该密码分享给他人</div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="danger" round @click="mimasetqueren">确认设置</el-button>
      </div>
    </el-dialog>

    <el-dialog title="请输入导出密码" center :visible.sync="mimalog" width="470px" :close-on-click-modal="false">
      <div>
        <el-input v-model="mima" show-password placeholder="请输入导出密码"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="danger" round @click="mimaqueren" >确认</el-button>
        <div style="position: absolute; right: 30px; bottom: 20px; line-height: 40px; color: rgb(67, 171, 255); font-size: 14px;" @click="mimachongzhilog = true">修改密码</div>
        <!-- <div style="position: absolute; right: 30px; bottom: 20px; line-height: 40px; color: rgb(67, 171, 255); font-size: 14px;" v-if="!yiyoumima" @click="mimasetlog = true">设置密码</div> -->
        <!-- <div style="position: absolute; left: 30px; bottom: 20px; line-height: 40px; color: rgb(67, 171, 255); font-size: 14px;" @click="mimasetlog = true">设置密码</div> -->
      </div>
    </el-dialog>


    <el-dialog title="修改密码" center :visible.sync="mimachongzhilog" width="470px" :close-on-click-modal="false">
      <div>
        <el-input v-model="mimashoujihao" disabled placeholder="请输入验证码"></el-input>
      </div>

      <div style="padding: 30px 0; position: relative;">
        <el-input v-model="mimacode" placeholder="请输入验证码"></el-input>
        <el-button style="padding: 9px 30px; position: absolute; right: 0px; top: 31px; color: rgb(255, 15, 15);" type="text" @click="getcode"
          :disabled="jinyong" size="mini">{{tishi}}</el-button>
      </div>
      <div>
        <el-input v-model="mimaset" show-password placeholder="请输入新密码"></el-input>
      </div>
      <div style="padding: 30px 0 0;">
        <el-input v-model="mimaset2" show-password placeholder="请再次输入密码"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="mimachongzhilog = false">取 消</el-button>
        <el-button round type="danger" @click="mimaqueren2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'order_catch_top',
    data() {
      return {
        mimalog: false,
        mima: "",
        mima2:"",
        mimaid: "",
        mimasetlog: false,
        mimaset: "",
        mimaset2: "",
        mimachongzhilog: false,
        mimashoujihao: "",
        mimacode: "",
        count: 60,
        tishi: "获取验证码",
        jinyong: false,
        user_id:"",
        yiyoumima:false
      }
    },
    created() {
      //导出密码
      if (localStorage.getItem("daochumima") != null) {
        this.mima = localStorage.getItem("daochumima")

      }

      this.huoqumima()
    },
    methods:{
      guanbi:function(){
        this.$emit('guanbi')
      },
      // http://test.91haoka.cn:81/api/plan-market/decrpty/passwd/set
      // user_id
      // passwd
      huoqumima:function(){
        axios.post("/api/plan-market/shop/info/get")
          .then((response)=> {
            if(response.data.msg.code == 0){

              if(response.data.data.decrypt_passwd){
                this.yiyoumima = true
              }else{
                this.mimasetlog = true
              }
              this.mimashoujihao = response.data.data.mobile
            }
          })
      },

      //密码设置
      mimasetqueren: function() {
        if (this.mimaset != this.mimaset2) {
          this.$message.error("输入的密码不一致");
          return false
        }

        axios.post("/api/plan-market/decrpty/passwd/set", {
            passwd_1: this.mimaset,
            passwd_2:this.mimaset,
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success("密码设置成功");
              this.mimasetlog = false
              this.huoqumima()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      //重置密码确认
      mimaqueren2: function() {
        if (this.mimaset != this.mimaset2) {
          this.$message.error("输入的密码不一致");
          return false
        }
        axios.post("/api/plan-market/decrpty/passwd/reset", {
            passwd_1:this.mimaset,
            passwd_2:this.mimaset,
            mobile:this.mimashoujihao,
            code:this.mimacode
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success("密码设置成功");
              this.mimachongzhilog = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //获取验证码
      getcode: function() {
        var that = this;
        var params = new URLSearchParams();
        params.append('mobile', this.mimashoujihao);
        axios.post('/api/plan-market/decrpty/passwd/code', params)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: '验证码已发送！',
                type: 'success'
              });
              that.daojishi()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //倒计时功能
      daojishi: function() {
        var interval;
        interval = window.setInterval(() => {
          if (this.count <= 0) {
            window.clearInterval(interval)
            this.tishi = "获取验证码",
              this.jinyong = false
            this.count = 60
          } else {
            this.count -= 1;
            this.tishi = this.count + "秒重新获取"
            this.jinyong = true
          }
        }, 1000);
      },
      //获取手机号发验证码
      getshoujihao: function() {
        axios.get("/api/gth/my/shop/mobile")
          .then(response => {
            if (response.data.msg.code == 0) {
              this.mimashoujihao = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      //确认密码下载
      mimaqueren: function() {
        this.$emit('daochumima',this.mima)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mima2 {
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    /deep/ .el-button--danger.is-plain {
        color: #EEF7FF !important;
        background: #fef0f0 !important;
        border-color: #fbc4c4 !important;
    }

    /deep/ .el-select{ margin-right: 20px;}
    /deep/ .el-input{ margin-right: 20px;}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250); border: 0;}
    /deep/ .el-range-editor .el-range-input { background: #f7f8fa;}
    /deep/ .el-button{ padding: 11px 23px !important;}

    /deep/ .el-input__inner:-moz-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner:-ms-input-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner::-webkit-input-placeholder {
        color: rgb(140, 140, 140);
    }

  }
</style>
